<script setup>
import {tableDataStore} from "@/stores/tableData.js";
import * as imgPathUtil from "@/utils/imgPathUtil.js"
import SelectItem from "@/views/SelectItem/SelectItem.vue";
import {rarityStore} from "@/stores/Rarity.js";
import Rarity from "@/dialog/Rarity.vue";
import server from "@/api/path.js";

const tableDataStr = tableDataStore()
const rarityStr = rarityStore()

tableDataStr.getData()
function handleSort(){

}

function rowClassName({ row }){
  if(row.type === null) return ""
  switch (row.type.id){
    case "curse": {
      return "curse-row"
    }
  }
  switch (row.rarity.displayName){
    case "普通": return "common-row"
    case "不寻常": return "uncommon-row"
    case "稀有": return "rare-row"
    case "史诗": return "epic-row"
    case "传奇": return "legendary-row"
    case "特殊": return "special-row"
    case "非常特殊": return "veryspecial-row"
  }
  // 可以根据其他条件设置不同的 class
  return '';
}
</script>

<template>
  <!--<el-button @click="tableDataStr.getData()">查询</el-button>-->
  <!--<el-button @click="tableDataStr.log()">打印</el-button>-->
  <!--123123123123123123123-->
  <el-popover placement="bottom" width="290" trigger="click">
    <template #reference>
      <el-button style="margin-right: 16px">筛选物品</el-button>
    </template>
    <div style="display:flex;justify-content: center">
      <select-item/>
    </div>
  </el-popover>

  <el-table
      :data="tableDataStr.enchantmentData"
      :cell-style="{height: '90'}"
      :row-class-name="rowClassName"
  >
    <el-table-column min-width="40px" label="附魔名称" align="center">
      <template v-slot="scope">
        <span> {{ scope.row.displayName }} </span>
      </template>
    </el-table-column>

    <el-table-column
        sortable
        :sort-method="handleSort"
        label="稀有度"
        align="center"
        width="100">
      <template v-slot="scope">
        <el-popover placement="right" width="300" trigger="hover">
          <template #reference>
            <span style="cursor: pointer" @mouseenter="rarityStr.showRarityInfo(scope.row.rarity)"> {{ scope.row.rarity.displayName }} </span>
          </template>
            <rarity/>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="最高等级" width="100" align="center">
      <template v-slot="scope">
        <span> {{ scope.row.maxLevel }} </span>
      </template>
    </el-table-column>

    <el-table-column label="附魔描述" align="center" width="500">
      <template v-slot="scope">
        <div style="display: flex;justify-content: flex-start">
          <span style="text-align: left"> {{ scope.row.description }} </span>
        </div>
      </template>
    </el-table-column>

    <el-table-column width="300" label="适用物品" align="center">
      <template v-slot="scope">
          <el-image style="width: 30px;height: 30px" fit="contain" :src="imgPathUtil.getImage(target)" v-for="target in scope.row.targets">
            <template #error>
              <div class="image-slot">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
      </template>
    </el-table-column>

    <el-table-column label="附魔冲突" align="center">
      <template v-slot="scope">
        <el-tag effect="light" size="large" type="warning" style="margin: 2px 4px;cursor: pointer" v-for="item in scope.row.conflicts">
          <span> {{ item }} </span>
        </el-tag>

      </template>
    </el-table-column>

    <el-table-column label="获得方式" align="center">
      <template v-slot="scope">
        <!--<el-tag effect="light" size="large" :type="scope.row.tradeable ? 'success' : 'danger'" style="margin: 2px 4px;cursor: pointer">-->
        <!--  <span> 村民 </span>-->
        <!--</el-tag>-->
        <!--<el-tag effect="light" size="large" :type="scope.row.enchantable ? 'success' : 'danger'" style="margin: 2px 4px;cursor: pointer">-->
        <!--  <span> 附魔 </span>-->
        <!--</el-tag>-->
        <!--<el-tag effect="light" size="large" :type="scope.row.discoverable ? 'success' : 'danger'" style="margin: 2px 4px;cursor: pointer">-->
        <!--  <span> 战利品 </span>-->
        <!--</el-tag>-->
        <el-check-tag :checked="scope.row.tradeable" style="margin: 2px 4px">
          <el-image style="width: 30px;height: 30px" :src="imgPathUtil.getImage('tradeable')"/>
        </el-check-tag>
        <el-check-tag :checked="scope.row.enchantable" style="margin: 2px 4px">
          <el-image style="width: 30px;height: 30px" :src="imgPathUtil.getImage('enchantable')"/>
        </el-check-tag>
        <el-check-tag :checked="scope.row.discoverable" style="margin: 2px 4px">
          <el-image style="width: 30px;height: 30px" :src="imgPathUtil.getImage('discoverable')"/>
        </el-check-tag>



      </template>
    </el-table-column>

  </el-table>
</template>

<style scoped>
>>> .curse-row {
  background-color: #fff6f6 !important;
}

>>> .common-row {
  background-color: #ffffff !important;
}

>>> .uncommon-row {
  background-color: #ffffff !important;
}

>>> .rare-row {
  background-color: #ffffff !important;
}

>>> .epic-row {
  background-color: #ffffff !important;
}

>>> .legendary-row {
  background-color: #ffffff !important;
}

>>> .special-row {
  background-color: #ffffff !important;
}

>>> .veryspecial-row {
  background-color: #ffffff !important;
}

/* 设置默认状态（未选中）的颜色为红色 */
.el-check-tag {
  background-color: #ffe9e9;
}

/* 设置选中状态的颜色为绿色 */
.el-check-tag.is-checked {
  background-color: rgba(200, 255, 200, 0.5);
}


</style>